<template>
	<view class="content">
		<!-- #ifdef MP -->
		<!-- <view class="" :style="{'height':navTop+'px'}"></view> -->
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="status_bar"></view> -->
		<!-- #endif -->
		<!-- <tn-sticky :offsetTop="navTop" :h5NavHeight="0" backgroundColor="#111224"> -->
<!--    <view class="topNav">动态</view>-->
		<view class="sticky" :style="{'paddingTop':'0px'}" >
			<view class="navTab" v-if="miniapp_switch == 1">
				<block v-for="(item,index) in scrollList" :key="index">
					<view class="tab-item" :class="{'at-tab-item':current == index}" @click="tabChange(index)">
						{{item.name}}
					</view>
				</block>
				<view class="tab-bottom" :style="[{left:left+'px'},{width:width+'px'}]">
					<view class="xian" :style="{width:width/5+'px'}"></view>
				</view>
			</view>
		</view>

		<!-- </tn-sticky> -->



		<view class="box" :class="show ? 'fade-in' : 'fade-out'" v-if="current == 0">
			<tn-swiper mode="none" :list="swiperList" :height="240" :radius="20" @click="swiperClick"></tn-swiper>
      <view class="titles tn-flex tn-flex-col-center tn-flex-row-between">
        <view class="title">热门活动</view>
        <!-- <view class="right" @click="goHuodng">
          <text>更多</text>
          <image src="/static/index/right.png" mode=""></image>
        </view> -->
      </view>
      <view class="ftitle">来参与商家的活动吧，尽情享受乐趣！</view>
      <view class="list">
        <block v-for="(item,index) in huodonglist" :key="index">
          <view class="list-item tn-flex" @click="goCirclePages(item.id)">
            <image :src="item.logo" class="avatar" mode=""></image>
            <view class="user">
              <view class="city-num">
                <text class="city">{{item.title}}</text>
                <text class="num">{{item.viewUser.viewUserCount}}人参与</text>
              </view>
              <view class="time">举办时间：{{item.times}}</view>
              <view class="browse">
                <view class="browse-item">
                  <image src="/static/index/yan.png" mode="" class="img1"></image>
                  <text>{{ item.view_num }}</text>
                </view>
                <view class="browse-item">
                  <image src="/static/index/redu.png" mode="" class="img2"></image>
                  <text>{{ item.viewUser.viewUserCount }}</text>
                </view>
				<!-- 置顶 -->
				<view class="browse-item" v-if="item.is_ding == 1" >
					<image src="/static/index/ding1.png" class="img2" mode=""></image>
				  <text>已置顶</text>
				</view>
              </view>
            </view>
			<view class="active-jiesu" v-if="item.active_expire == 1" >已结束</view>
          </view>
        </block>

      </view>
	  
			<!-- <view style="margin-top: 15px;" class="title" v-if="miniapp_switch == 1">最新话题</view>
			<view class="ftitle" v-if="miniapp_switch == 1">这是今天的最新话题，请查收吖</view>
			<view class="topic-list" v-if="miniapp_switch == 1">
				<block v-for="(item,index) in gList" :key="index">
					<topic-list :item="item" :isIndex="index" :isPlay="activeIndex == index"
						@audioPlay="audioPlay"></topic-list>
				</block>
			</view> -->

		</view>
		<view class="box" v-if="current == 1">
			<view style="margin-top: 15px;" class="title" v-if="miniapp_switch == 1">最新话题</view>
			<view class="ftitle" v-if="miniapp_switch == 1">这是今天的最新话题，请查收吖</view>
			<view class="topic-list" v-if="miniapp_switch == 1">
				<block v-for="(item,index) in gList" :key="index">
					<topic-list :item="item" :isIndex="index" :isPlay="activeIndex == index"
						@audioPlay="audioPlay"></topic-list>
				</block>
			</view>
		</view>
		<tn-load-more :status="loadingStatus"></tn-load-more>


		<!-- <swiper class="swiper" :current="current" @change="swiperChange">

			<swiper-item>
				<scroll-view  refresher-background="#111224" scroll-y="true" class="scroll-view"
				@scrolltolower="scrolltolower(1)" :refresher-triggered="triggered" :refresher-enabled="true"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore">

				</scroll-view>
			</swiper-item>
		</swiper> -->

		<!-- 发布按钮 -->
		<view class="fbtn" @click="goEdit" v-if="current == 1">
			<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/fabu.png" mode=""></image>
		</view>
		
		<view class="fbtn" @click="navigateToFn({ url: '/circlePages/create', checkLogin: true })" v-if="current == 0">
			<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/addactivity.png" mode=""></image>
		</view>
		
	</view>
</template>
<script>
	const audioContext = uni.createInnerAudioContext()
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				scrollList: [{
						name: '活动'
					},
					{
						name: '帖子',
					}
				],
				current: 0,
				width: 0,
				left: 0,
				itemNode: '',
				tagsList: [],
				huodonglist: [],
				show: false,
				gList: [],
				focusList: [],
				loadingStatus: 'loadmore',
				page: 1, //发现帖子page
				fpage: 1, //关注帖子page
				Jid: '', //防抖定时器id
				navTop: 0,
				activeIndex: -1,
				miniapp_switch: 0,
				swiperList: []

			}
		},
		computed: {
			...mapState({
				vuex_status_bar_height: state => state.vuex_status_bar_height,
			})
		},
		onLoad() {
			uni.showLoading();
			// this.InitLoadingPage()
			uni.$on('fabu_ok', (res) => {
				setTimeout(() => {
					this.page = 1
					// this.fpage = 1
					this.InitLoadingPage()
					console.log(res, '监听到了')
				}, 1000)

			})
			// #ifdef MP
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.navTop = menuButtonInfo.top
			// #endif
			// #ifdef APP-PLUS
			this.navTop = this.vuex_status_bar_height
			console.log(this.navTop)
			// #endif
			this._freshing = false;
			this.GetConfig()
		},
		onShow() {
			this.page = 1
			this.InitLoadingPage()

		},


		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			// this.fpage = 1
			this.InitLoadingPage()
		},
		// 上拉加载
		onReachBottom() {
			console.log('触底了')
			this.loadingStatus = 'loading'
			clearTimeout(this.Jid)
			this.Jid = setTimeout(() => {
				this.page++
				this.current == 0 ? this.bottomLoadingApi(0) : this.bottomLoadingApi(1)
			}, 1000)

		},
		onReady() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tab-item').boundingClientRect(data => {
					this.itemNode = data
					this.width = data[this.current].width
				}).exec();
			}, 500)

			audioContext.onEnded(res => {
				console.log('结束了')
				this.activeIndex = -1
			})
		},
		methods: {
			async GetConfig() {
				let res = await this.$request({
					method: 'post',
					url: '/api/index/GetConfig'
				})
				console.log(res.data.data.miniapp_switch, 'miniapp_switchminiapp_switch')
				// this.miniapp_switch = res.data.data.miniapp_switch
				this.miniapp_switch = 1
			},


			// 播放音频事件监听
			audioPlay(index) {
				if (this.activeIndex == index) {
					this.activeIndex = -1
					audioContext.pause()
				} else {
					this.activeIndex = index
					audioContext.src = this.gList[index].voc
					audioContext.play()
				}

			},
			InitLoadingPage() {
				const promiseArr = [this.getActiveList(), this.getBanner(), this.getGoodslist(0)]
				Promise.all(promiseArr).then(resArr => {
					this.renderPage(resArr)

				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err.data.msg,
						icon: 'none'
					})
				})
			},
			// 热门活动
			getActiveList() {
				return this.$request({
					loading: 0,
					method: 'post',
					url: '/api/index/allActiveList',
					data: {
						page: this.page,
						type: 'list'
					}
				})
			},
			getBanner(){
				return this.$request({
					loading: 0,
					method: 'post',
					url:'/api/index/activeBanner'
				})
			},
			// 动态列表
			getGoodslist(hot_type) {
				return this.$request({
					loading: 0,
					method: 'post',
					url: '/api/index/getGoodslist',
					data: {
						fujin: false,
						hot_type,
						page: this.page
					}
				})
			},
			// 下拉加载动态列表
			async bottomLoadingApi(type) {
				if (type == 0) {
					let result = await this.getActiveList();
					let data = result.data.data.data;
					this.huodonglist = this.huodonglist.concat(data)
					this.loadingStatus = 'nomore'
					if (data.length == 0) {
						this.page--
					}
				}else {
					let result = await this.getGoodslist(0);
					let data = result.data.data.data;
					this.gList = this.gList.concat(data)
					this.loadingStatus = 'nomore'
					if (data.length == 0) {
						this.page--
					}
				}
				
			},
			renderPage([res1, res2, res3]) {
				// 活动(接口)
				this.huodonglist = res1.data.data.data

				// 活动banner 接口
				// banner
				this.swiperList = res2.data.data

				// 帖子
				console.log(res3.data.data.data)

				this.gList = res3.data.data.data


				uni.hideLoading();
				this.show = true
				uni.stopPullDownRefresh();
			},
			swiperClick(e){
				let id = this.swiperList[e].url
				uni.navigateTo({
					url: '/circlePages/reserve?id='+id
				});
			},
			tabChange(index) {
				setTimeout(() => {
					this.current = index
				}, 300)
				this.page = 1
				this.left = this.itemNode[index].left
			},
			swiperChange(e) {
				console.log(e)
				let {
					current
				} = e.detail
				this.current = current
				this.left = this.itemNode[current].left
			},
			// 触底
			// scrolltolower(type) {
			// 	console.log('触底了')
			// 	this.loadingStatus = 'loading'
			// 	clearTimeout(this.Jid)
			// 	this.Jid = setTimeout(() => {
			// 		type == 0 ? this.page++ : this.fpage++
			// 		type == 0 ? this.bottomLoadingApi(0) : this.bottomLoadingApi(1)
			// 	}, 1000)

			// },

			goCirclePages(id) {
				uni.navigateTo({
					url: '/circlePages/reserve?id=' + id
				})
			},
			goTagsList(id) {
				uni.navigateTo({
					url: "/circlePages/tags_list?id=" + id
				})
			},
			goEdit() {
				uni.navigateTo({
					url: "/circlePages/edit"
				})
			},
			goHuodng() {
				uni.navigateTo({
					url: "/homePages/huodng"
				})
			}
		}
	}
</script>
<style lang="scss">
	/* #ifdef APP-PLUS */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	/* #endif */

</style>
<style lang="scss" scoped>

	.content {
    .topNav{
      font-size: 16px;
      font-weight: 700;
      text-align: center;
      height: 44px;
      line-height: 44px;
      background: #fff;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999;
      width: 100%;
    }
    background: #efefef;
    // #ifdef APP
    height:100vh;
    // #endif
    // #ifndef APP
    height: calc(100vh - 95px);
    // #endif

		// display: flex;
		// flex-direction: column;
		// /* #ifdef APP-PLUS || MP */
		// height: 100vh;
		// /* #endif */
		// /* #ifdef H5 */
		// height: calc(100vh - 100rpx);

		/* #endif */
		// .swiper {
		// 	flex: 1;

		// 	.scroll-view {
		// 		height: 100%;

		// 	}
		// }
		.sticky {
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			//background-color: #111224;
			z-index: 10000;
		}

		.navTab {
			display: flex;
			align-items: center;
			height: 88rpx;
			position: relative;
      background: #fff;
			.tab-item {
				width: 150rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				// margin-right: 56rpx;
			}

			.at-tab-item {
				font-size: 36rpx;
				font-weight: bold;
				color: $uni-text-color;

			}

			.tab-bottom {
				position: absolute;
				bottom: 0;
				transition: left .2s linear;
				display: flex;
				justify-content: center;

				.xian {
					height: 8rpx;
          background: linear-gradient(90deg, #080808 0%, #080808 100%);
					border-radius: 60rpx;
				}
			}
		}

		.box {
			padding:15px 15px 40px 15px;

			.topic-list {
				margin-top: 36rpx;
			}

			.title {
        //margin-top: 15px;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}

			.ftitle {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				margin-top: 14rpx;
			}

			.tag-list {
				margin-top: 32rpx;
        background: #fff;
        padding: 10px;
				.tag-item {
					height: 45rpx;
					background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
					border-radius: 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 45rpx;
					padding: 0 16rpx;
					margin: 10rpx;
				}
			}

			.titles {
				margin-top: 14rpx;

				.right {
					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						margin-right: 10rpx;
					}

					image {
						width: 12rpx;
						height: 21rpx;
					}
				}
			}

			.list {
				.list-item {
					height: 176rpx;
					background: #ffffff;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					padding: 0 24rpx;
					margin-top: 24rpx;

					.avatar {
						width: 128rpx;
						height: 128rpx;
						border-radius: 50%;
					}

					.user {
						flex: 1;
						padding-left: 24rpx;

						.city-num {
							display: flex;
							justify-content: space-between;

							.city {
								font-size: 30rpx;
								font-weight: 400;
								color: #333333;
							}

							.num {
								font-size: 26rpx;
								font-weight: 400;
								color: #FFFFFF;
							}
						}

						.time {
							font-size: 24rpx;
							font-weight: 400;
							color: #3333339e;
							margin: 10rpx 0 13rpx 0;
						}

						.browse {
							display: flex;
							align-items: center;

							.browse-item {
								display: flex;
								align-items: center;
								margin-right: 32rpx;

								.img1 {
									width: 26rpx;
									height: 18rpx;
								}

								.img2 {
									width: 18rpx;
									height: 21rpx;
								}

								text {
									font-size: 22rpx;
									font-weight: 400;
									color: #333333;
									margin-left: 6rpx;
								}
							}
						}
					}
				}
			}

		}

		.fbtn {
			position: fixed;
			bottom: 300rpx;
			right: 30rpx;
			animation: suspension 3s ease-in-out infinite;

			image {
				width: 108rpx;
				height: 108rpx;
			}
		}

		@keyframes suspension {

			0%,
			100% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(50rpx);
			}
		}
	}
	.active-jiesu{
		position: absolute;
		margin-top: -60px;
		right: 15px;
		background: #bfbfbf;
		color: #fff;
		padding: 10rpx 20rpx;
		border-bottom-left-radius: 10px;
		border-top-left-radius: 10px;
		font-size: 18rpx;
	}
</style>
